<template>
  <div class="article-list">
    <!-- article组件 -->
    <van-pull-refresh v-model="isLoading" @refresh="refresh" v-if="bol">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多数据了"
        @load="getArticle"
      >
        <ArticleItem
          v-for="item in list"
          :key="item.art_id"
          :i="item"
        ></ArticleItem>
        <!-- 添加骨架屏，刷新时过渡 -->
        <!-- <div class="vanSkeleton" v-if="isLoading">
          <van-skeleton
            title
            :row="3"
            :loading="isLoading"
            v-for="i in 10"
            :key="i"
          >
          </van-skeleton>
        </div> -->
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 导入article_item组件
import ArticleItem from './article_item.vue'
import { articles } from '@/api/home.js'
export default {
  // 注册article_item组件
  components: {
    ArticleItem
  },
  data () {
    return {
      bol: true,
      isLoading: false,
      loading: false,
      finished: false,
      timestamp: Date.now(),
      list: []
    }
  },
  // 接收频道id
  props: ['id'],
  created () {
    // this.getArticle() 设置了上拉加载，要注释掉生命周期中的调用，否则就调用了两次，list是累加的，就会产生key值重复
  },
  methods: {
    async getArticle () {
      const res = await articles({
        channel_id: this.id,
        timestamp: this.timestamp
      })
      console.log('文章列表：', res)
      // 储存数据
      this.list.push(...res.data.results)
      // 判断时间戳是否还有返回值，有则继续加载，没有（返回值为null）则结束加载
      if (this.timestamp) {
        //  将当前页的时间戳赋值给变量timestamp，等到下一页的时候再赋值时间戳
        this.loading = false
        this.timestamp = res.data.pre_timestamp
      } else {
        this.finished = false
      }
    },
    refresh () {
      // 还原上拉加载的属性
      this.loading = false
      this.finished = false
      this.isLoading = false
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    }
  }
}
</script>

<style lang="less" scoped>
.article-list {
  height: 100%;
  overflow-y: auto; // 如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容
  padding: 0 16px;
}
</style>
